<template>
  <div class="enroll-container">
    <div class="enroll-header">
      <h2>请登记部门相关信息</h2>
    </div>
    <!-- 部门基本信息 -->
    <div class="enroll-container">
      <div class="enroll-container-header">一、填写部门基本信息</div>
      <div class="enroll-content">
        <el-form :model="departRuleForm" status-icon label-width="200px" class="demo-ruleForm">
          <!-- 部门名称 -->
          <el-form-item label="部门名称" prop="name">
            <el-input v-model="departRuleForm.name" type="text" autocomplete="off"></el-input>
          </el-form-item>

          <!-- 招新推文链接 -->
          <el-form-item label="招新推文链接" prop="link">
            <el-input v-model="departRuleForm.link" type="text" autocomplete="off"></el-input>
          </el-form-item>

          <!-- 部门职能 -->
          <el-form-item label="部门职能" prop="harvest" class="el-whole-item">
            <el-input
              v-model="departRuleForm.harvest"
              type="textarea"
              autocomplete="off"
              resize="none"
            ></el-input>
          </el-form-item>

          <!-- 加入可得收获 -->
          <el-form-item label="可获得收获" prop="introduction" class="el-whole-item">
            <el-input
              v-model="departRuleForm.introduction"
              type="textarea"
              autocomplete="off"
              resize="none"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!-- 负责人信息 -->
    <div class="enroll-container">
      <div class="enroll-container-header">二、填写负责人信息</div>
      <div class="enroll-content">
        <el-form
          ref="ruleFormRef"
          :model="departRuleForm"
          status-icon
          :rules="responRules"
          label-width="200px"
          class="demo-ruleForm"
        >
          <el-form-item label="学生负责人" prop="minister">
            <el-input v-model="departRuleForm.minister" type="text" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="负责人学号" prop="ministerNum">
            <el-input v-model="departRuleForm.ministerNum" type="text" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="负责人手机号码" prop="ministerPhone">
            <el-input v-model="departRuleForm.ministerPhone" type="text" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="负责人邮箱" prop="ministerEmail">
            <el-input v-model="departRuleForm.ministerEmail" type="text" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <button class="enroll-button" v-debounce="{ fn: preserve }">保存</button>
  </div>
</template>

<script setup lang='ts'>
import { ref, reactive, getCurrentInstance } from 'vue'
import type { ElForm } from 'element-plus'
import UpdateRequest from '../api/UpdateRequest'
import GetInfo from '@/api/GetInfo';

// 获取绑定在实例上的全局方法
const { proxy } = getCurrentInstance()
const resetSetItem = proxy['$resetSetItem']

const departmentId = sessionStorage.getItem('depId');
if (departmentId) {
  GetInfo.selectDepartmentById(parseInt(departmentId)).then(response => {
    resetSetItem('x', response.interviewNow)
    Object.keys(response).forEach(key => {
      departRuleForm[key] = response[key];
    })
  })
}



//部门基本信息
type FormInstance = InstanceType<typeof ElForm>
const ruleFormRef = ref<FormInstance>()

const departRuleForm = reactive({

  //部门基本信息
  name: '',
  introduction: '',
  harvest: '',
  link: '',

  //负责人信息
  minister: '',
  ministerNum: '',
  ministerPhone: '',
  ministerEmail: '',
})


//负责人学号
const stuNumber = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('请输入负责人学号'))
  }

  setTimeout(() => {

    if (parseInt(value) < value * 1) {
      callback(new Error('请输入整数'))
    } else {
      if (value.length != 10) {
        callback(new Error('学号应该为10位数'))
      } else {
        callback()
      }
    }
  }, 1000)
}
//负责人手机号码
const regMobile = /^(((13[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[3-8]{1})|(18[0-9]{1})|(19[0-9]{1})|(14[5-7]{1}))+\d{8})$/;
const stuPhone = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('请输入负责人手机号'))
  }

  setTimeout(() => {
    if (!regMobile.test(value)) {
      callback(new Error('请输入正确的手机号'))
    }
  }, 1000)
}
//负责人邮箱
const regEmail = /^([a-zA-Z]|[0-9])(\w|-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
const stuEmail = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('请输入邮箱'))
  }
  setTimeout(() => {
    if (!regEmail.test(value)) {
      callback(new Error('请输入正确的邮箱号码'))
    }
  }, 1000)
}
const responRules = reactive({
  ministerNum: [{ validator: stuNumber, trigger: 'blur' }],
  ministerPhone: [{ validator: stuPhone, trigger: 'blur' }],
  ministerEmail: [{ validator: stuEmail, trigger: 'blur' }],
})

//保存信息
const preserve = () => {
  UpdateRequest.UpdateDepartment(departRuleForm)
}
</script>

<style lang="scss" >
$colors: (
  "t-blue": #21618d,
  //常用颜色--蓝
    "t-fontBlue": #20608c,
  //字体颜色--蓝
    "t-grey": #8a8888,
  //字体常用颜色--灰
    "t-white": #f5f5f5,
  //字体常用颜色--白
    "border": #707070 //边框颜色
);
// 信息登记页面

.enroll-container {
  position: relative;
  top: 0;
  left: 0;
  input,
  textarea {
    border: 1px solid map-get($map: $colors, $key: border);
  }
  .enroll-content-basic-input,
  .enroll-content-intro,
  .enroll-content-pic {
    margin-top: 2.4375rem;
  }
  input {
    width: 21rem;
    height: 2.0625rem;
  }
  textarea {
    width: 61.4375rem;
    height: 12.5625rem;
  }
  .enroll-header {
    h2 {
      font-size: 2.8125rem;
      text-align: center;
      color: map-get($map: $colors, $key: t-grey);
    }
  }
  .enroll-container {
    font-size: 1.5625rem;
    .enroll-container-header {
      margin-top: 30px;
      margin-bottom: 35px;
      font-weight: 700;
      color: map-get($map: $colors, $key: t-fontBlue);
    }
    //内容
    .enroll-content {
      .el-form {
        display: flex;
        flex-wrap: wrap;
        .el-form-item {
          width: 50%;
          text-align: center;
          margin-bottom: 35px;
          .el-form-item__label {
            vertical-align: baseline;
          }
        }
        .el-whole-item {
          width: 100%;
        }
      }
      .el-input__inner {
        width: 336px;
        font-size: 18px;
      }
      .el-textarea__inner {
        font-size: 18px;
      }
      .el-form-item__label,
      input {
        font-size: 1.5625rem;
      }
      //头像模块
      .avatar-uploader .el-upload {
        border: 1px dashed #707070;
        border-radius: 50%;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }
      .avatar-uploader {
        .el-icon.avatar-uploader-icon {
          font-size: 25px;
          color: #8c939d;
          width: 50px;
          height: 50px;
          text-align: center;
        }
      }

      .avatar {
        width: 50px;
        height: 50px;
        display: block;
      }
      //群二维码
      .avatar-uploader-group {
        .el-upload {
          border: 1px dashed #d9d9d9;
          border-radius: 6px;
          cursor: pointer;
          position: relative;
          overflow: hidden;
        }
        .el-icon.avatar-uploader-icon {
          font-size: 28px;
          color: #8c939d;
          width: 178px;
          height: 178px;
          text-align: center;
        }
      }
      .avatar-uploader-group .el-upload:hover,
      .avatar-uploader .el-upload:hover {
        border-color: #409eff;
      }

      .avatar {
        width: 178px;
        height: 178px;
        display: block;
      }
    }
  }

  .enroll-button {
    position: absolute;
    right: 0;
    width: 6.25rem;
    height: 2.5rem;
    margin: 2rem 0;
    text-align: center;
    cursor: pointer;
    background-color: #ffffff;
    color: map-get($map: $colors, $key: t-grey);
    font-size: 1.5625rem;
    border-radius: 3.125rem;
    border: 1px solid map-get($map: $colors, $key: border);
    &:hover {
      color: map-get($map: $colors, $key: t-blue);
    }
  }
  .enroll-success {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(245, 245, 245);
    z-index: 10;
    .enroll-success-content {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      justify-content: center;
      align-items: center;
      width: 12.5rem;
      height: 9.375rem;
      background-color: #fff;
      font-size: 1.5625rem;
      color: map-get($map: $colors, $key: t-grey);
      border: 1px solid map-get($map: $colors, $key: border);
    }
  }
  .successShow {
    display: none;
  }
}
</style>
